<script setup>
import {computed, ref} from "vue";
import { ElMessage } from "element-plus";
import {http} from "@/api";
import {useStore} from "vuex";
function createOrderNumber() {
  // 获取当前日期和时间
  let date = new Date();
  let year = date.getFullYear();
  let month = date.getMonth() + 1; // getMonth() 是从0开始的，所以需要+1
  let day = date.getDate();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();

  // 格式化日期和时间
  month = month < 10 ? '0' + month : month; // 如果月份小于10，前面添加一个0
  day = day < 10 ? '0' + day : day; // 如果日期小于10，前面添加一个0
  hours = hours < 10 ? '0' + hours : hours; // 如果小时小于10，前面添加一个0
  minutes = minutes < 10 ? '0' + minutes : minutes; // 如果分钟小于10，前面添加一个0
  seconds = seconds < 10 ? '0' + seconds : seconds; // 如果秒数小于10，前面添加一个0

  // 创建订单号
  return year + '' + month + '' + day + '' + hours + '' + minutes + '' + seconds;
}
const store = useStore()
const currentQs = ref({
})
const currentOption = ref({

})
const questionList = ref([])

const currentIndex = computed(() => {
  return questionList.value.findIndex(el => el.id === currentQs.value.id) + 1
})
const nextQuestion = () => {
  if (currentIndex.value < questionList.value.length) {
    currentQs.value = questionList.value[currentIndex.value]
  } else {
    console.log('已经是最后一题')
    ElMessage.warning('已经是最后一题')
  }
}
const prevQuestion = () => {
  console.log('上一题')
  if (currentIndex.value > 1) {
    currentQs.value = questionList.value[currentIndex.value - 2]
  } else {
    console.log('已经是第一题')
    ElMessage.warning('已经是第一题')
  }
}
const activeOption = (item) => {
  if (currentOption.value.id === item.id) {
    currentOption.value = {}
    currentQs.value.active = null
  } else {
    currentOption.value = item
    currentQs.value.active = item
  }
}

function getQuestionList() {
  http.question.list().then(res => {
    questionList.value = res.data.map(el => {
      return {
        ...el,
        active: null
      }
    })
    currentQs.value = questionList.value[0]
  })
}
getQuestionList()
const submit = () => {
  if (questionList.value.some(el => !el.active)) {
    ElMessage.warning('请完成所有题目')
  } else {
    http.answer.create({
      order_no: createOrderNumber(),
      user_id: store.getters.userInfo.id,
      content: JSON.stringify(questionList.value)
    }).then(res => {
      getQuestionList()
      ElMessage.success('提交成功')
    })
  }
}
</script>

<template>
  <PageMain title="答题页面">
    <el-row :gutter="20">
      <el-col :span="8"></el-col>
      <el-col :span="8" >
<!--        翻页答题-->
        <el-card style="max-width: 480px">
          <template #header>
            <div class="f-r a-c j-c">
              <el-button type="primary" @click="prevQuestion">上一题</el-button>
              <div style="margin: 0 10px">
                <span style="margin-right: 20px">{{ currentQs.name }}</span>
                <span>第{{ currentIndex }}题</span>
                <span>/</span>
                <span>共{{ questionList.length }}题</span>
              </div>
              <el-button type="primary" @click="nextQuestion">下一题</el-button>
            </div>
          </template>
          <div @click="activeOption(item)" :class="['option-item', currentOption.id === item.id ? 'active' : '']" v-for="item in currentQs.questionOptions">
            {{ item.value_key }}、{{ item.value }}
          </div>
          <template #footer>
           <div style="text-align: center">
             <el-button type="primary" @click="submit">提交答案</el-button>
           </div>
          </template>
        </el-card>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </PageMain>
</template>

<style lang="scss">
.option-item {
  padding: 10px 20px;
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 10px;
  transition: all 0.5s;
  &:hover,
  &.active {
    border-color: #0A6FFF;
  }
}
</style>